<template>
	<view class="container">
		<view class="search-bar">
			<uni-search-bar @confirm="search" @input="input" cancelButton="none"></uni-search-bar>
		</view>
		<scroll-view :scroll-y="true" class="list-container">
			<view class="list-item" v-for="(item, index) in filteredList" :key="index" @click="selectItem(item)">
				{{ item.name }}
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

const searchQuery = ref('');
const allParkingLots = ref([]);

// 生成模拟数据
const generateMockData = () => {
	const data = [];
	for (let i = 1; i <= 200; i++) {
		data.push({ id: i, name: `停车场 No.${i}` });
	}
	allParkingLots.value = data;
};

generateMockData();

const filteredList = computed(() => {
	if (!searchQuery.value) {
		return allParkingLots.value;
	}
	return allParkingLots.value.filter(item => item.name.includes(searchQuery.value));
});

const input = (val) => {
	searchQuery.value = val;
};

const search = (val) => {
	searchQuery.value = val;
};

const selectItem = (item) => {
	uni.$emit('selectParkingLot', item);
	uni.navigateBack();
};

</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.search-bar {
	padding: 10rpx;
	background-color: #fff;
}

.list-container {
	flex: 1;
	overflow-y: auto;
}

.list-item {
	padding: 30rpx;
	border-bottom: 1px solid #f0f0f0;
	background-color: #fff;
}
</style>